<template>
<el-container :style="{ height: containerHeight + 'px' }">
    <!-- 左侧部门树 -->
    <el-main height="">
        <el-aside width="210px" style="border-right: 1px solid #dfe6ec;">
        <left-tree @treeClick="treeClick"></left-tree>
        </el-aside>
    </el-main>

    <!-- 右侧列表 -->
    <el-main>
        <el-form :model="listQuery" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input placeholder="请输入用户姓名" v-model="listQuery.loginName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :icon="Search" @click="searchBtn">搜索</el-button>
                <el-button :icon="Refresh" style="color: #f67670;" @click="resetBtn">重置</el-button>
                <el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.list" border stripe :height="tableHeight">
            <el-table-column prop="loginName" label="姓名" />
            <el-table-column prop="deptName" label="所属部门" />
            <el-table-column prop="mobile" label="电话" width="150" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column fixed="right" label="操作" width="270" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button size="small" type="primary" :icon="Setting" @click="assignBtn(scope.row.loginName, scope.row.id)">分配角色</el-button>
                    <el-button size="small" type="danger" :icon="Delete" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="listQuery.currentPage"
            :page-sizes="[10, 20, 40, 80, 100]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total" background>
        >
        </el-pagination>
    </el-main>
</el-container>

<!-- 新增，编辑弹框 -->
<addAndEdit ref="addRef" @save="save"></addAndEdit>

<!-- 分配角色弹窗 -->
<assignRole ref="assignRef"></assignRole>

</template>
<script setup lang='ts'>
import { ref,reactive, onMounted, nextTick } from 'vue'
import leftTree from './LeftTree.vue'
import { Plus, Search, Refresh, Edit, Delete, Setting } from '@element-plus/icons-vue'
import addAndEdit from './addAndEdit.vue'
import curd from '@/composables/user/curd'
import userList from '@/composables/user/userList'
import assignRole from './assignRole.vue'

// 容器的高度
const containerHeight = ref(0)
// 表格的高度
const tableHeight = ref(0)
// 表格列表
const { tableData, listQuery, getUserList, treeClick, sizeChange, currentChange, resetBtn} = userList()
// 增删改查的操作
const { searchBtn, addBtn, editBtn, deleteBtn, assignBtn, addRef, assignRef, save } = curd(getUserList)
onMounted(() => {
    nextTick(() => {
        containerHeight.value = window.innerHeight - 100
        tableHeight.value = window.innerHeight - 200
    })
})
</script>
<style scoped lang='scss'>
</style>